<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊添_聊天窗口</title>

    <!--    BootStrap remote file css-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">

    <!--    BootStrap local file-->
    <link rel="stylesheet" href="../../../../node_modules/bootstrap/dist/css/bootstrap.css">

    <!--    BootStrap Icon on the Internet-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

    <!--    local css-->
    <link rel="stylesheet" href="./css/style.css">

</head>
<body class="bg-light">
<div class="container p-md-5">

    <div class="card">
        <div class="card-header d-flex justify-content-between align-content-center bg-success bg-gradient">
            <div class="left text-light">
                <i class="bi bi-gear-wide-connected"></i>
                聊添
            </div>
            <div class="right text-light">
                <a class="text-light" href="./index.html">离开聊添</a>
                <i class="bi bi-arrow-bar-right"></i>
            </div>
        </div>
        <div class="card-header d-flex justify-content-center align-content-center bg-success">
            <div class="text-light text-center" id="room_and_name_placeholder">
                房间号
                <br>
                <span class="fontsizeMin">名称</span>
            </div>
        </div>
        <div class="card-body pb-0">
            <div class="row">
                <!--//这里是左侧选择列表-->
                <div id="leftContent_"
                     class="col-sm-12 col-md-4 pb-md-2">

                    <ul class="list-group list-group-flush room-name">
                        <li class="list-group-item">
                            <i class="bi bi-door-open"></i>
                            <b>房间列表</b>
                        </li>

                    </ul>

                    <ul class="list-group list-group-flush user-list">
                        <li class="list-group-item">
                            <i class="bi bi-person"></i>
                            <b>用户列表</b>
                        </li>

                    </ul>
                </div>

                <!--// 这里是右侧会话列表-->
                <div id="rightContent_"
                     class="col-sm-12 col-md-8 ">

                    <div class="row">


                        <div class="col-12 message-container scrollPage">

                            <!-- 系统广播欢迎样式-->
                            <div class="d-flex justify-content-center my-3 ">
                                <!--                                <div class="card w-auto bg-success text-dark">-->
                                <div class="card-header text-end bg-info py-1 fw-bold fontsizeMin">
                                    欢迎
                                    <i class="bi bi-chat-fill"></i>
                                    本地时间:
                                    <span class="local-time"></span>
                                </div>
                                <!--                                </div>-->
                            </div>


                            <!--服务器时间戳样式-->
                            <!--去看 main.js 相应的部分-->


                            <!--对话样式-->
                            <!--<div class="d-flex justify-content-end my-3 ">-->
                            <!--    <div class="card w-auto bg-success text-light">-->
                            <!--        <div class="card-header text-end bg-success bg-gradient py-0 fw-bold border-bottom-0">-->
                            <!--            ${message.name}-->
                            <!--            <i class="bi bi-chat-fill"></i>-->
                            <!--        </div>-->
                            <!--        <div class="card-body pt-0 pb-1 text-end">${message.content}</div>-->
                            <!--        <div class="card-footer text-end text-light text-opacity-50 fontsizeMin py-0">-->
                            <!--            HH:MM:SS-->
                            <!--        </div>-->
                            <!--    </div>-->
                            <!--</div>-->

                            <!--<div class="d-flex justify-content-start my-3 ">-->
                            <!--    <div class="card w-auto bg-light text-dark">-->
                            <!--        <div class="card-header bg-light text-start bg-gradient py-0 fw-bold border-bottom-0">-->
                            <!--            <i class="bi bi-chat-fill"></i>-->
                            <!--            ${message.name}-->
                            <!--        </div>-->
                            <!--        <div class="card-body pt-0 pb-1 text-start">${message.content}</div>-->
                            <!--        <div class="card-footer text-start text-dark text-opacity-50 fontsizeMin py-0">-->
                            <!--            HH:MM:SS-->
                            <!--        </div>-->
                            <!--    </div>-->
                            <!--</div>-->

                        </div>


                    </div>
                </div>
            </div>
        </div>
        <div class="card-footer">

            <!--  这里用 form 套住 下面的 input-->
            <!--  实现对输入信息的表单格式化-->
            <form action="#" id="chat-form">
                <div class="input-group m-1">
                    <input
                            id="msg"
                            type="text"
                            class="form-control"
                            placeholder="请输入消息">
                    <button class="btn btn-success">
                        <i class="bi bi-cursor"></i>
                        发送
                    </button>
                </div>
            </form>

        </div>
    </div>

</div>

<!-- BootStrap Local -->
<script src="../../../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- BootStrap remote file javascript-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ"
        crossorigin="anonymous"></script>

<!-- socket.io socket服务-->
<script src="/socket.io/socket.io.js"></script>

<!--qs cdn , 用于获取浏览器参数-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.10.1/qs.min.js"></script>


<!--快速获取格式化的时间-->
<script src="timeParse.js"></script>
<!--本地 客户端脚本 , main.js引入的脚本放在之上-->
<script src="main.js"></script>
</body>
</html>